<template>
  <view class="box"
  :style="{
    'text-align': message.userAccountId+''===self.id+'' ? 'right' : 'left',
  }"
  >
    <view
        v-if="message.userAccountId+''!==self.id+''"
        class="avatar-box">
      <kt-avatar
          size="80rpx"
          :src="$kt.file.visit(userInfo.fileIdOfAvatar)"
      ></kt-avatar>
    </view>

    <view class="message-box">
      <view class="message-box-item">
        <view v-for="item in message.items">
          <view v-if="item.type==='userAccount:id'"
                class="user-item"
          @click="$kt.router.navTo('/pages/user-info/user-info',{'userAccountId':item.content})"
          >
            <user-info-card
                :user-account-id="item.content"
            ></user-info-card>
          </view>
          <view v-if="item.type==='image:id'">
            <image
                v-for="(item2, index2) in JSON.parse(item.content)"
                class="chat-list-item-content-img"
                :src="$kt.file.visit(item2)"
                @click="previewImage($kt.file.visit(item2))"
                mode="widthFix"
            ></image>
          </view>
          <view v-if="item.type==='text'">
            <text class="chat-list-item-content-text">{{ item.content }}</text>
          </view>
        </view>
      </view>
    </view>
    <view
        v-if="message.userAccountId+''===self.id+''"
        class="avatar-box">
      <kt-avatar
          size="80rpx"
          :src="$kt.file.visit(userInfo.fileIdOfAvatar)"
      ></kt-avatar>
    </view>

  </view>
</template>

<script>
import UserInfoCard from "../../user-info-card/user-info-card.vue";

export default {
  components: {UserInfoCard},
  props: {
    message: {
      type: Object,
      default: {}
    },
  },
  data() {
    return {
      userInfo: {},
      self:{}
    }
  },
  watch: {
    message: {
      handler(val) {
      }
    },
  },
  created() {
    this.self = this.$kt.userAccount.getSelf();
    this.$kt.userAccount.getById(this.message.userAccountId).then(res => {
      this.userInfo = res;
      console.log(this.userInfo, "获取用户信息");
      try {
        // 重新渲染
        this.$forceUpdate();
      } catch (e) {
      }
    }).catch(err => {
      uni.showToast({
        title: err.errMsg,
        icon: "none"
      });
    });
  },
  methods: {
    // 预览图片
    previewImage(url) {
      uni.previewImage({
        urls: [url],
        current: url
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
}

.message-box {
  min-width: 100rpx;
  max-width: calc(100% - 100rpx - 100rpx);
  display: inline-block;
  padding: 20rpx;
  box-sizing: border-box;
  vertical-align: top;
  // 气泡框
  background-color: #FFFFFF;
  border-radius: 20rpx;
  text-align: left;
}

.chat-list-item-content-text{
  word-wrap: break-word;
  //word-break: break-all;
  white-space: pre-wrap;

}

.avatar-box {
  width: 100rpx;
  display: inline-block;
}

.chat-list-item-content-img{
  width: 300rpx;
  border-radius: 10rpx;
}

.user-item:active{
  //transform: scale(0.97);
}
</style>
